import { Dropdown, Menu, Table, TableProps } from "antd";
import dayjs from "dayjs";
import React, { useState } from "react";
import { User } from "./search-panel";
import { Link } from "react-router-dom";
import { Pin } from "../../components/pin";
import { useEdiProject } from "utils/index";
import { ButtonNoPadding } from "components/lib";
import MenuItem from "antd/lib/menu/MenuItem";
import { projectListAction } from "./project-list.store";
import { useDispatch } from "react-redux";
import { detailProject } from "service/project-list";
export interface Project {
  id: number;
  name: string;
  personId: string;
  pin: number;
  organization: string;
  created: number;
}

interface ListProps extends TableProps<Project> {
  users: User[];
  params: Partial<Project>;
}

export const List = ({ users, params, ...props }: ListProps) => {
  const { mutate } = useEdiProject(params);
  const dispatch = useDispatch();
  const [reload, setreload] = useState(false);
  const handleDetail = async (id: number) => {};
  return (
    <Table
      pagination={false}
      columns={[
        {
          title: <Pin checked={true} disabled={true} />,
          render(value, project) {
            return (
              <Pin
                checked={!!project.pin}
                onChange={(pin) => {
                  mutate({ id: project.id, pin: !!pin ? 1 : 0 });
                }}
              />
            );
          },
        },
        {
          title: "名称",
          sorter: (a, b) => a.name.localeCompare(b.name),
          render(value, project) {
            return <Link to={String(project.id)}>{project.name}</Link>;
          },
        },
        {
          title: "部门",
          dataIndex: "organization",
        },
        {
          title: "负责人",
          render(value, project) {
            return (
              <span>
                {users?.find((user) => user.id === project.personId)?.name ||
                  "未知"}
              </span>
            );
          },
        },
        {
          title: "创建时间",
          render(value, project) {
            return (
              <span>
                {project.created
                  ? dayjs(project.created).format("YYYY-MM-DD")
                  : "无"}
              </span>
            );
          },
        },
        {
          render(value, project) {
            return (
              <Dropdown
                overlay={
                  <Menu>
                    <MenuItem key={"edit"}>
                      <ButtonNoPadding
                        type={"link"}
                        onClick={() => {
                          dispatch(projectListAction.openProjectModal());
                          dispatch(
                            projectListAction.openModelId({
                              id: project.id,
                              type: "edit",
                            })
                          );
                        }}
                      >
                        编辑项目
                      </ButtonNoPadding>
                    </MenuItem>
                    <MenuItem key={"delete"}>
                      <ButtonNoPadding
                        type={"link"}
                        onClick={() => {
                          handleDetail(project.id);
                        }}
                      >
                        删除
                      </ButtonNoPadding>
                    </MenuItem>
                  </Menu>
                }
              >
                <ButtonNoPadding type={"link"}>...</ButtonNoPadding>
              </Dropdown>
            );
          },
        },
      ]}
      {...props}
      rowKey={"id"}
      bordered
    ></Table>
  );
};
